<template>
	<view class="regist">
		<view class="form">
				<u--form :model="form" :rules="rules" ref="uForm">
					<u-form-item prop="userName">
						<u-input type="text" v-model="form.userName" placeholder="请输入昵称"></u-input>
					</u-form-item>
					<u-form-item prop="userNumber">
						<u-input type="text" v-model="form.userNumber" placeholder="请输入账号"></u-input>
					</u-form-item>
					<u-form-item prop="password">
						<u-input type="password" v-model="form.password" placeholder="请输入密码"></u-input>
					</u-form-item>
					<u-form-item prop="nextPassword">
						<u-input type="password" v-model="form.nextPassword" placeholder="再次输入密码"></u-input>
					</u-form-item>
					<u-form-item>
						<u-button color="#f36b10"  @click="regist">注册</u-button>
					</u-form-item>
				</u--form>
		</view>
		<view class="login">
			<navigator url="/pagesG/logn/logn" open-type="redirect">
				注册成功，请登录
			</navigator>
		</view>
	</view>
</template>

<script>
	import {mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			var validate = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('不能为空'));
			        } else {
						let obj = this.getUserList.find(item => item.userNumber == this.form.userNumber);
						if(obj != undefined){
							callback(new Error('账号已存在'));
						}else{
							callback();
						}
			        }
			      };
			var checkValidate = (rule, value, callback) => {
				if(value === ''){
					callback(new Error('不能为空'));
				}else if( value != this.form.password){
					callback(new Error('密码不一致'));
				}else{
					callback();
				}
			};
			return {
				form:{
					userName:'',
					userNumber:'',
					password:'',
					nextPassword:'',
				},
				rules:{
					userName:[
						{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger:['blur','change']},
						{validator: validate, trigger:[ 'blur','change']}
						],
					userNumber:[{validator: validate, trigger:[ 'blur','change']}],
					password:[{validator: validate, trigger: [ 'blur','change']} ],
					nextPassword:[{validator: checkValidate, trigger: [ 'blur','change']} ],
				}
			}
		},
		computed:{
			...mapGetters('user',['getUserList']),
		},
		methods: {
			...mapActions('user',['addUser']),
			regist(){
				this.$refs.uForm.validate().then(res => {
					this.addUser({
						userName:this.form.userName,
						userNumber:this.form.userNumber,
						password:this.form.password,
					})
					uni.$u.toast('注册成功');
					this.form = {};
							}).catch(errors => {
								uni.$u.toast('注册失败')
								
					})
			}
		}
	}
</script>

<style lang="scss">
	.regist{
		.form{
			width: 80%;
			margin: 0 auto;
		}
		.login{
			width: 100%;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 13px;
			color: gray;
		}
	}
</style>
